<div class="easyui-layout" data-options="fit:true">
    <!-- Begin of toolbar -->
    <div id="wu-toolbar-2">
        <div class="wu-toolbar-button">
            <a class="easyui-linkbutton" href="#" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-cancel" onclick="cancel()" plain="true">取消</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-reload" onclick="reload()" plain="true">刷新</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-print" onclick="openAdd()" plain="true">打印</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-help" onclick="openEdit()" plain="true">帮助</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-undo" onclick="remove()" plain="true">撤销</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-redo" onclick="cancel()" plain="true">重做</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-sum" onclick="reload()" plain="true">总计</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-back" onclick="reload()" plain="true">返回</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-tip" onclick="reload()" plain="true">提示</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-save" onclick="reload()" plain="true">保存</a>
            <a class="easyui-linkbutton" href="#" iconCls="icon-cut" onclick="reload()" plain="true">剪切</a>
        </div>
        <div class="wu-toolbar-search">
            <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
            <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
            <label>用户组：</label>
            <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                <option value="0">选择用户组</option>
                <option value="1">黄钻</option>
                <option value="2">红钻</option>
                <option value="3">蓝钻</option>
            </select>
            <label>关键词：</label><input class="wu-text" style="width:100px">
            <a class="easyui-linkbutton" href="#" iconCls="icon-search">开始检索</a>
        </div>
    </div>
    <!-- End of toolbar -->
    <table class="easyui-datagrid" id="wu-datagrid-2" toolbar="#wu-toolbar-2"></table>
</div>
<!-- Begin of easyui-dialog -->
<div class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" id="wu-dialog-2"
     style="width:400px; padding:10px;">
    <form id="wu-form-2" method="post">
        <table>
            <tr>
                <td align="right" width="60">姓 名:</td>
                <td><input class="wu-text" name="name" type="text"/></td>
            </tr>
            <tr>
                <td align="right">邮 箱:</td>
                <td><input class="wu-text" name="email" type="text"/></td>
            </tr>
            <tr>
                <td align="right">主 题:</td>
                <td><input class="wu-text" name="subject" type="text"/></td>
            </tr>
            <tr>
                <td align="right" valign="top">内 容:</td>
                <td><textarea class="wu-textarea" name="content" rows="6" style="width:260px"></textarea></td>
            </tr>
        </table>
    </form>
</div>
<!-- End of easyui-dialog -->
<script type="text/javascript">
    /**
     * Name 添加记录
     */
    function add() {
        $('#wu-form-2').form('submit', {
            url: '',
            success: function (data) {
                if (data) {
                    $.messager.alert('信息提示', '提交成功！', 'info');
                    $('#wu-dialog-2').dialog('close');
                } else {
                    $.messager.alert('信息提示', '提交失败！', 'info');
                }
            }
        });
    }

    /**
     * Name 修改记录
     */
    function edit() {
        $('#wu-form-2').form('submit', {
            url: '',
            success: function (data) {
                if (data) {
                    $.messager.alert('信息提示', '提交成功！', 'info');
                    $('#wu-dialog-2').dialog('close');
                } else {
                    $.messager.alert('信息提示', '提交失败！', 'info');
                }
            }
        });
    }

    /**
     * Name 删除记录
     */
    function remove() {
        $.messager.confirm('信息提示', '确定要删除该记录？', function (result) {
            if (result) {
                var items = $('#wu-datagrid-2').datagrid('getSelections');
                var ids = [];
                $(items).each(function () {
                    ids.push(this.productid);
                });
                //alert(ids);return;
                $.ajax({
                    url: '',
                    data: '',
                    success: function (data) {
                        if (data) {
                            $.messager.alert('信息提示', '删除成功！', 'info');
                        } else {
                            $.messager.alert('信息提示', '删除失败！', 'info');
                        }
                    }
                });
            }
        });
    }

    /**
     * Name 打开添加窗口
     */
    function openAdd() {
        $('#wu-form-2').form('clear');
        $('#wu-dialog-2').dialog({
            closed: false,
            modal: true,
            title: "添加信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: add
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#wu-dialog-2').dialog('close');
                }
            }]
        });
    }

    /**
     * Name 打开修改窗口
     */
    function openEdit() {
        $('#wu-form-2').form('clear');
        var item = $('#wu-datagrid-2').datagrid('getSelected');
        //alert(item.productid);return;
        $.ajax({
            url: '',
            data: '',
            success: function (data) {
                if (data) {
                    $('#wu-dialog-2').dialog('close');
                } else {
                    //绑定值
                    $('#wu-form-2').form('load', data)
                }
            }
        });
        $('#wu-dialog-2').dialog({
            closed: false,
            modal: true,
            title: "修改信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: edit
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#wu-dialog-2').dialog('close');
                }
            }]
        });
    }

    /**
     * Name 分页过滤器
     */
    function pagerFilter(data) {
        if (typeof data.length == 'number' && typeof data.splice == 'function') {// is array
            data = {
                total: data.length,
                rows: data
            }
        }
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage: function (pageNum, pageSize) {
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh', {pageNumber: pageNum, pageSize: pageSize});
                dg.datagrid('loadData', data);
            }
        });
        if (!data.originalRows) {
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }

    /**
     * Name 载入数据
     */
    $('#wu-datagrid-2').datagrid({
        url: 'temp/datagrid.php',
        loadFilter: pagerFilter,
        rownumbers: true,
        singleSelect: false,
        pageSize: 20,
        pagination: true,
        multiSort: true,
        fitColumns: true,
        fit: true,
        columns: [[
            {checkbox: true},
            {field: 'productid', title: 'productid', width: 100, sortable: true},
            {field: 'productname', title: 'productname', width: 180, sortable: true},
            {field: 'unitcost', title: 'unitcost', width: 100},
            {field: 'listprice', title: 'listprice', width: 100},
            {field: 'attr1', title: 'attr1', width: 100},
            {field: 'itemid', title: 'itemid', width: 100},
            {field: 'status', title: 'status', width: 100}
        ]]
    });

</script>